.TodoList {
	width     : 500px;
	border    : 1px solid #ccc;
	margin    : 0 auto;
	margin-top: 100px;
	padding   : 10px;
	box-sizing: border-box;
}

.header input {
	width        : 100%;
	height       : 30px;
	box-sizing   : border-box;
	border       : 1px solid #ccc;
	padding      : 5px;
	border-radius: 4px;
}

ul {
	padding: 0;
}

li {
	list-style: none;
}

input[type='checkbox'] {
	cursor: pointer;
}

.list ul li {
	height         : 24px;
	line-height    : 24px;
	display        : flex;
	justify-content: space-between;
	border-bottom  : 1px solid #ccc;
	padding        : 5px 0;
}

.list ul li button {
	display: none;
	cursor : pointer;
}

.list ul li:hover {
	background-color: #eee;
}

.list ul li:hover button {
	display: inline-block;
}

.footer {
	display        : flex;
	justify-content: space-between;
	margin-top     : 20px;
}

.footer button {
	cursor: pointer;
}